<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>魔方成绩在线提交</title>
<meta name="author" content="andy - vip@d163.net">
<meta name="copyright" content="www.d163.net">
<link href="https://lib.baomitu.com/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_374778_eq952jykmer.css">
<link href="inc/css/wap.css?v=1" rel="stylesheet" type="text/css" />
<style>
  .top-ico .iconfont {font-size: 94px; color: #09BB07; }
  .top-ico {text-align: center; }
  .msg-box-txt {text-align: center; }
  .top-ico .iconfont.icon-warn {color: red; }
  .manage {position: absolute; right: 6px; top: 1px; }
  .manage .iconfont {color: #ffffff; font-size: 23px; }
  .sub_top{display: none;}
  .span_cnzz {position: fixed; bottom: 0; left: 0; visibility: hidden; }
  .foot, .foot a{color: #FF9800;}
  .qd_desc {margin-bottom: 15px; color: #ffffff; text-align: center; font-size: 14px; color: #fff497; }
  .page-contnet-msg-hd {
      background-color: #ffffff;
  }
  .main{
  	max-width: 640px;
  }
  .f-box input {
      border: 1px solid #dfdfdf;
      background-color: #fff;
      font-size: 14px;
      padding: 4px;
      width: 100%;
  }

  .f-box .wf-label {
      color: #fff;
      font-size: 14px;
  }
  .back-dctimer a {
      display: block;
      width: 100%;
      color: #fff;
      background-color: #009688;
      padding: 10px 0;
      text-align: center;
      margin-top: 16px;
      cursor: pointer;
  }



  .page-content-msg {position: fixed; z-index: 4001; width: 96%; left: 2%;top: 10px; }
  .page-contnet-msg-hd .top-title {color: #F44336; text-align: center; font-size: 20px; font-weight: 700; margin: 0; padding: 6px 0; }
  .msk {position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.52); z-index: 4000;  visibility: hidden;  }
  .on>.msk{visibility: visible;}
  
  .f-box {
      margin-bottom: 10px;
      display: flex;
      flex-wrap: wrap;
  }
  .wfform-opt {
      width: 100%;
  }
  .wfform-opt::has(> input){
  	color: red;
  }

  .wfform-opt input[type=tel] {
      width: 100%;
  }
  .f-box .wfb {
      width: 100%;
      color: #ffffff;
  }


  @media (min-width: 768px) {
  	.page-content-msg {width: 520px; left: calc(50% - 260px); }
  	
  }

</style>
<script>
window.onload = function(){
	/*
    document.body.addEventListener("touchmove",function(event){
        event.preventDefault();
        event.stopPropagation();
    }, false);
    */
    document.ontouchmove = function(e){
      e.preventDefault();
    }
    document.onkeydown = function(e){
    	if(!e) e = window.event;
    	if((e.keyCode || e.which) == 13){
    	    e.preventDefault();
    		document.getElementById("sub").click();
    	}
    }
}
</script>
<body>
<div class="bgcard"></div>
<div class="msk"></div>
<div class="main">

<div class="qd_text_box">
  <div class="qd_title"><h4>魔方成绩在线提交</h4></div>
  <div class="qd_desc">欢迎大家提交自己的魔方成绩</div>
</div>
<form name="queryform" class="myform" >
    <input type="hidden" name="txt_data" id="txt_data" value="1">
	<div class="wfwrap">
		
		<div class="f-box">
			<label class="wf-label">QQ号<i>*</i></label>
			<div class="wfform-opt">
				<input class='input_text' name='input_name[]' id="name"  type='text' onkeyup="this.value=this.value.replace(/[^\d\-]/,'')" placeholder="请输入QQ号">
			</div>
		</div>
		<div class="f-box">
			<label class="wf-label">常用名称<i>*</i></label>
			<div class="wfform-opt">
				<input class='input_text' name='input_name[]' id="u_name"  type='text' placeholder="请输入常用名称">
			</div>
		</div>
		<div class="f-box">
			<label class="wf-label">三阶成绩(sub值)<i>*</i></label>
			<div class="wfform-opt">
				<input  class='qd_qudao input_text' id="cube33" name='input_name[]' placeholder="请输入三阶成绩sub值" type='text'>
			</div>
		</div>

        <div><input type='hidden' class='input_text create_time' name='input_name[]' data-name='0'></div>

	</div>
    
    <div class="so_boxes">
      <input type="button" name="button" class="buts" id="sub" value="提交成绩">
    </div>
    
</form>
<div class="back-dctimer"><a href="http://www.d163.net/dctimer/index.html">返回计时器</a></div>

</div>

<script src="https://lib.baomitu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
function getMyDate(str) {
    var oDate = new Date(str),
        oYear = oDate.getFullYear(),
        oMonth = oDate.getMonth() + 1,
        oDay = oDate.getDate(),
        oHour = oDate.getHours(),
        oMin = oDate.getMinutes(),
        oSen = oDate.getSeconds(),
        oTime = oYear + '-' + getzf(oMonth) + '-' + getzf(oDay) + ' ' + getzf(oHour) + ':' + getzf(oMin) + ':' + getzf(oSen); //最后拼接时间  
    return oTime;
};

function getzf(num) {
    if (parseInt(num) < 10) {
        num = '0' + num;
    }
    return num;
}
$(function(){
	function closeMsgBox(){
		$(".page-content-msg").remove();
		$('body').removeClass('on');
	}
	$.ajax({
		url: "config_index.php",
		type: "GET",
		dataType:"json",
		// data: cont,
		success: function(res){
			document.title = res.title;
			$(".qd_title>h4").text(res.qd_title);
			$(".qd_desc").text(res.qd_desc);
		},
		error: function() {
			console.log('error');
		}
	});

	$(document).on('click','#sub',function(){
		if($("#name").val()==''){
			alert("请输入QQ号");
			return;
		}
		if($("#u_name").val()==''){
			alert("请输入常用名称");
			return;
		}
		if($("#cube33").val()==''){
			alert("请输入三阶成绩");
			return;
		}
		
		$('.create_time').val(getMyDate(Date.now()));
		var radio = []
		var checkbox = []
		var select = []
		var textarea = []
		var cont = $("form").serialize();
		$.ajax({
			url: "qd_do.php",
			type: "POST",
			dataType:"json",
			data: cont,
			success: function(res){
				console.log(res);
				var user_name = res.user_name;
				
				// msg_ico = res.code=="0" ? "icon-warn" : "icon-success";
				if(res.code==0 || res.code==1 ){

				    msg_ico = "icon-warn";
				}else if(res.code==2){
				    msg_ico = "icon-success";
				    $('.create_time').val(getMyDate(Date.now()));
				    // var orderclass = $(this).data('orderclass');
				    
				}
				isshow = res.code=="1" ? "block" : "none";
				if(res.code=='2'){
					isshow2 = 'block';
				}else{ isshow2 = 'none'; }
				var success_title = res.msg,
				success_msg = res.success_msg,
				user_phone = res.user_phone,
				success_msg_repeat = res.success_msg_repeat,
				msg_html=`
				 <div class="page-content-msg">
				 <div class="page-contnet-msg-hd">
				 <h3 class="top-title" style="display: ${isshow}">${success_msg_repeat}</h3>
				  <div class="top-ico"><i class="iconfont ${msg_ico}"></i></div>
				  <div class="msg-box-txt">
				      <h4>${success_title}</h4>
				      <p>${success_msg}</p>
				      <div class="user_info">
				      	<span></span><span>${user_phone}</span>
				      </div>
				      <div style="display:${isshow2} ; color:red;"></div>
				  </div>
				  </div>
				  <div class="so_boxesd">
				    <input type="button" value="返 回" class="btn btn-primary btn-block"  id="close">
				  </div>
				</div>
				`;
				$(".main").prepend($(msg_html));
				$('body').addClass('on');
				$("input[type='text']").val('');
				$(document).on('click','#close',closeMsgBox);
			},
			error: function() {
				console.log('error');
				msg_html=`
				 <div class="page-content-msg">
				 <div class="page-contnet-msg-hd">
				  <div class="top-ico"><i class="iconfont icon-warn"></i></div>
				  <div class="msg-box-txt">
				      <h4>出错了</h4>
				      <p>您可以尝试重新签到</p>
				      
				  </div>
				  </div>
				  <div class="so_boxesd">
				    <input type="button" value="返 回" class="btn btn-primary btn-block"  id="close">
				  </div>
				</div>
				`;
				$(".main").prepend($(msg_html));
				$("input[type='text']").val('');
				$(document).on('click','#close',closeMsgBox);
			}
		})
	})
})

</script>
</body>
</html>